<template>
    <div class="todo-list">
      <el-input v-model="newTodo" placeholder="请输入待办事项"></el-input>
      <el-button type="primary" @click="addTodo">添加</el-button>
      <el-divider></el-divider>
      <el-table :data="todos">
        <el-table-column prop="title" label="待办事项"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="danger" size="small" @click="deleteTodo(row)">删除</el-button>
            <el-button v-if="row.status === '未完成'" type="success" size="small" @click="complete(row)">完成</el-button>
          </template>
        </el-table-column>>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        newTodo: '',
        todos: []
      }
    },
    methods:  {
      addTodo() {
        if (!this.newTodo) return
        this.todos.push({
          title: this.newTodo,
          status: '未完成'
        })
        this.newTodo = ''
      },
      deleteTodo(row) {
        const index = this.todos.indexOf(row)
        this.todos.splice(index, 1)
      },
      complete(row) {
        row.status = '已完成'
      }
    }
  }
  </script>
  
  <style>
  .todo-list {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  </style>
  